<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定 'v-on' &简写 '@'</title>
    <link href="../image/favicon.ico" rel="shortcut icon">
    <script src="../lib/vue-2.6.12.js"></script>
</head>
<body>
   <div id="app">
       <p>number 的值为: {{ number }} </p>
       <!-- v-on 绑定事件，可以简写为 @ -->
       <!--  <button v-on:click="add(1)"> + </button> -->
       <button @click="add(1)"> + </button>
       <button @click="sub"> - </button>
   </div>

   <script>
       const vm = new Vue({
           el:'#app',
           data:{
               number: 0
           },
           // methods 的作用是定义事件的处理函数
           methods:{
               // add:function (){
               //     console.log('add事件触发了！')
               // },
               // 简写(常用)
               add (n){ // 可以通过 () 进行传参
                   console.log('add事件触发了！')
                   // 在 methods 处理函数中, this 就是 new 出来的 vm 实例对象
                   // console.log(vm === this)
                   this.number += n
               },
               sub (){
                   console.log('sub事件触发了！')
                   this.number -= 1
               },

           }
       })
   </script>
</body>
</html>